<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @media (min-width: 768px) {
            #slider-sub {
                width: 250px;
                position: absolute;
                z-index: 1;
                background: #052b64;
                height: 800px;
            }

            .mysearch {
                margin: 10px 0;
            }
        }
    </style>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
        <!--引入侧边栏-->
        <div th:insert="~{commons/bar::topbar}"></div>
    <div style="display: flex">
       <div  style="background: darkblue">
           <!--引入侧边栏-->
           <div th:insert="~{commons/topbar2::topbar2}"></div>
       </div>
       <div >
          <div style="background: darkcyan;max-width: 700px;max-height: 800px">
ookkkkkkk
          </div>
       </div>
    </div>
</div>
</body>
</html>